import 'package:flutter/material.dart';
import 'package:treadmill/values/colors.dart';

class RankingListPage extends StatefulWidget {
  @override
  _RankingListPageState createState() => _RankingListPageState();
}

class _RankingListPageState extends State<RankingListPage>
    with TickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    _tabController = new TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text(
          '排行榜',
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
        leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            onPressed: () {
              Navigator.of(context).pop();
            }),
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 50,
            color: headerColor,
            child: TabBar(
              labelStyle: TextStyle(
                height: 2,
              ),
              indicatorColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.tab,
              indicatorPadding: const EdgeInsets.symmetric(horizontal: 40),
              //indicator: BoxDecoration(border: Border(bottom: BorderSide(color: Colors.white,style: BorderStyle.solid))) ,
              controller: _tabController,
              tabs: <Widget>[
                Tab(
                  text: "日",
                ),
                Tab(text: "周"),
                Tab(text: "月")
              ],
            ),
          ),
          Expanded(
            flex: 1,
            child: TabBarView(
              controller: _tabController,
              children: <Widget>[
                RankList(rankType: RankType.Day),
                RankList(rankType: RankType.Week),
                RankList(rankType: RankType.Month)
              ],
            ),
          )
        ],
      ),
    );
  }
}

enum RankType { Day, Week, Month }

class RankList extends StatefulWidget {
  final RankType rankType;

  const RankList({Key key, @required this.rankType}) : super(key: key);
  @override
  _RankListState createState() => _RankListState();
}

class _RankListState extends State<RankList> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(
               // color: Colors.lightBlue[400],
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [headerColor,Colors.white])
                ),
                height: 160,
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
                child: Material(
                  borderRadius: BorderRadius.circular(20),
                  elevation: 4,
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                        gradient:LinearGradient(
                            begin:Alignment.topCenter ,
                            end: Alignment.bottomCenter,
                            colors: [Colors.orange[50],Colors.white])),
                    height: 150,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal:20.0),
                      child: Stack(
                        children: [
                          Positioned(
                            top: 10,
                            right: 0,
                            child: Container(
                              width: 15,
                              child: Column(
                                children: <Widget>[
                                  Text("0",style: TextStyle(fontSize: 15,fontWeight: FontWeight.w200),),
                                  Icon(Icons.favorite,color: Colors.red[200],size: 20,)
                                ],
                              ),
                            ),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Container(
                                child: Text(
                                  'NO.1',
                                  style: TextStyle(
                                      color: Colors.blue,
                                      fontSize: 25,
                                      fontWeight: FontWeight.w800,
                                      fontStyle: FontStyle.italic),
                                ),
                              ),
                              Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  CircleAvatar(
                                    radius: 35,
                                    child: Icon(
                                      Icons.person,
                                      size: 45,
                                    ),
                                  ),
                                  SizedBox(height: 10,),
                                  Text('老爷')
                                ],
                              ),
                              Container(
                                child: Text(
                                  '0.00km',
                                  style: TextStyle(
                                      color: Colors.orange,
                                      fontSize: 20,
                                      fontWeight: FontWeight.w800),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
          Expanded(
            child: ListView.builder(
              physics: BouncingScrollPhysics(),
                itemCount: 20,
                itemBuilder: (context, index) {
                  return ListTile(
                    leading: Container(
                      padding: const EdgeInsets.only(left: 10),
                      width: 100,
                      child: Row(
                        children: <Widget>[
                          Text((index+1).toString(),style: TextStyle(fontSize: 20
                          ,fontStyle: FontStyle.italic,color: Colors.blue[200]),),
                          SizedBox(width: 10,),
                          CircleAvatar(
                            backgroundImage: NetworkImage("http://b-ssl.duitang.com/uploads/item/201709/04/20170904011231_G2XxB.png"),
                          )
                        ],
                      ),
                    ),
                    title: Text("张先生"),
                    subtitle: Text("上海 民兴趣"),
                    trailing: Container(
                      width: 140,
                      child: Row(
                        children: <Widget>[
                          Text('153.20Km',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w800,color: Colors.grey),),
                          SizedBox(width: 20,),
                          Column(
                            children: <Widget>[
                              Text("0",style: TextStyle(fontSize: 15,fontWeight: FontWeight.w200),),
                              Icon(Icons.favorite,color: Colors.red[200],size: 20,)
                            ],
                          )
                        ],
                      ),
                    ),
                  );
                }),
          )
        ],
      ),
    );
  }
}
